<template>
	<view>
		<navbar id="navbar" name="数据对比"></navbar>
		<view class="calendarTop-view">
			<view class="moth">
				{{monthArr[0]}}年{{monthArr[1]}}月 {{month}}
			</view>
			<view class="calendar-icon" @tap="handleTap('picker8')">
			</view>
		</view>
		<!-- 日历 -->
		<calendar ref="calendar" :chooseDataLou="chooseTime" :yearAndMonth="yearAndMonth" :canChoose="canChoose" :startTime="startTime1" :endTime="endTime1"
			@returnData="returnData" @queryindex="change($event)" :value='month' @change='change'></calendar>

		<u-sticky :offset-top="height">
			<view class="u-sticky-box">
				<view class="contrast-box">
					<view class="time-box">
						{{leftTime}}
					</view>
					<view class="cheng-img">
						<image src="http://static.bsyjk.cn/lou/35FA925115D34FA28332F08727ACE445.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
					</view>
					<view class="time-box">
						{{rightTime}}
					</view>
				</view>
				<view class="contrast-box">
					<view class="remove-box" @tap.stop="removeOptions(1,leftTime)">
						移除左边
					</view>
					<view class="comparison-button" @tap.stop="clickContrast">
						对比
					</view>
					<view class="remove-box" @tap.stop="removeOptions(2,rightTime)">
						移除右边
					</view>
				</view>
			</view>

		</u-sticky>

		<!-- end -->
		<view class="contrast-b">
			<checkbox-group @change="checkboxGroup">
				<view v-if="dayList.length==0">
					<view @tap.stop="clickItem(item,index)" class="contrast-flex" v-for="(item,index) in result" :key="index">
						<view class="Company">
							<!-- 75.80kg -->
							<label>
								<checkbox :value="item.healthDataId"
									:checked="item.checked" :disabled="!item.checked && noChoose" color="#F44B49" style="transform:scale(0.7)" />
								{{item.weight}}kg
							</label>
						</view>
						<view class="day" @tap="navdataDetails(item)">
							<!-- 06日 18:38 -->
							{{item.createTimes[2]}}
						</view>
					</view>
				</view>
				<view v-if="dayList.length!=0">
					<view class="contrast-flex" v-for="(item,index) in dayList" :key="index">
						<view class="Company">
							<!-- 75.80kg -->
							<label>
								<checkbox :value="item.healthDataId" :checked="item.checked" color="#F44B49"
									style="transform:scale(0.7)" />
								{{item.weight}}kg
							</label>
						</view>
						<view class="day" @tap="navdataDetails(item)">
							<!-- 06日 18:38 -->
							{{item.createTimes[2]}}
						</view>
					</view>
				</view>
			</checkbox-group>
			<view v-if="result.length <=0" style="text-align: center;color: #fff;font-size: 30upx;">
				<view class="noDataicon">
				</view>
				暂无数据
			</view>
		</view>
		<u-popup v-model="contrastpop" mode="center" border-radius="14">
			<view style="width: 100vw;height: 100vh;position: relative;">

				<view class="popupContent"
					style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
					<view class="popup-title" style="border-radius: 24rpx 24rpx 0 0;">
						<view class="diand"></view>
						<view class="title">
							数据对比
						</view>
						<view class="click-none" @tap.stop="closeContrast">
						</view>
					</view>
					<view class="contrast-day">
						对比日期：{{leftTime}}
					</view>
					<view class="contrast-day">
						对比日期：{{rightTime}}
					</view>
					<view class="contrast-button" @tap="ToCompare(leftId,rightId)">
						点击对比
					</view>
				</view>
			</view>
		</u-popup>


<!-- 		<u-popup v-model="contrastpop" mode="center" border-radius="14">
			<view style="width: 100vw;height: 100vh;position: relative;" @tap.stop="rquse">

				<view class="popupContent"
					style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
					<view class="popup-title" style="border-radius: 24rpx 24rpx 0 0;">
						<view class="diand"></view>
						<view class="title">
							数据对比
						</view>
						<view class="click-none" @tap="rquse">
						</view>
					</view>
					<view class="contrast-day">
						对比日期：{{startTime.createTime}}
					</view>
					<view class="contrast-day">
						对比日期：{{endTime.createTime}}
					</view>
					<view class="contrast-button" @tap="ToCompare(startTime,endTime)">
						点击对比
					</view>
				</view>
			</view>
		</u-popup> -->

		<lb-picker ref="picker8" v-model="value8" mode="dateSelector" :format="curFormat"
			:display-format="displayFormat[curFormat]" @change="handleChange" @confirm="handleConfirm"
			@cancel="handleCancel">
		</lb-picker>
		<!-- <button type="button" @tap="rquse">重设</button> -->
	</view>
</template>

<script>
import lbPicker  from './components/lb-picker/index';
	import calendar from "./components/calendar/index.vue"

import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"


import uSticky from "@/uview-ui/components/u-sticky/u-sticky.vue"
	export default {
		components: {
			uPopup,
			uSticky,
			lbPicker,
			calendar
		},
		data() {
			return {
				canChoose:[],
				yearAndMonth:'',//年和月份
				height:'',
				noChoose:false,
				leftTime: '',
				leftId:'',
				rightTime: '',
				rightId:'',
				contrastBox: [{
					healthDataId: '',
					createTime: '',
				}, {
					healthDataId: '',
					createTime: '',
				}],

				nowMonthAllData: [], //当前月所有数据
				chooseTime: [], //当前选择的日期和时间
				chooseData: [], //当前选择日期的数据
				dayList: [], //日数组
				endTime1: {},
				startTime1: {},
				cArr: [],
				startTime: {}, //第一个对比
				endTime: {}, //第二个对比
				result: '', //当前月数据
				value8: '',
				curFormat: 'YYYY-MM',
				displayFormat: {
					'YYYY': 'YYYY',
					'YYYY-MM': 'YYYY-MM',
					'YYYY-MM-DD': 'YYYY-MM-DD',
					'MM-DD': 'MM-DD',
					'DD日HH时mm分': 'DD-HH-mm',
					'HH:mm:ss': 'HH-mm',
					'mm:ss': 'mm-ss',
					'mm分ss秒': 'mm-ss'
				},
				contrastpop: false, //确认弹窗
				monthArr: this.$basejs.getToday(),
				month: this.$basejs.getToday().join('-'), //日历控件日期
			}
		},
		onLoad() {
			this.getScaleDataList(this.monthArr[0] + '-' + this.monthArr[1])
		},
		onReady() {
		  const query = uni.createSelectorQuery().in(this);
		  query.select('#navbar').boundingClientRect(data => {
		    const navHeight = JSON.stringify(data.height * 2);
		    uni.setStorageSync('navHeight', navHeight);
		    this.height = uni.getStorageSync('navHeight');
		  }).exec();
		},
		methods: {
			rquse() {
				let result = this.result;
				for (let i = 0; i < result.length; i++) {
					this.$set(this.result[i], 'checked', false)
				}
				this.contrastpop = false
			},
			//移除选项
			removeOptions(type,time){
				let _this = this;
				if(time==''){
					this.$message.info('请先选择报告')
					return;
				}
				if(type == 1){
					this.result.forEach(function(v,i){
						if(v.healthDataId == _this.leftId){
							v.checked =false;
						}
					})
					this.leftId = '';
					this.leftTime = '';
					this.noChoose = false;

				}else{
					this.result.forEach(function(v,i){
						if(v.healthDataId == _this.rightId){
							v.checked =false;
						}
					})
					this.rightId ='';
					this.rightTime ='';
					this.noChoose = false;
				}
			},
			//关闭对比弹框
			closeContrast(){
				this.contrastpop = false;
			},
			//点击做对比
			clickContrast(){
				if(this.leftId !='' && this.rightId !=''){
					this.contrastpop = true;
				}else{
					this.$message.info('请先选择两份报告')
				}
			},
			//选中某一项
			clickItem(item, index) {
				if(this.leftId !='' && this.rightId !='' && item.checked ==false){
					this.noChoose = true;
					this.$message.info('只能对比两份报告')
					return;
				}

				if (this.leftId == '' && item.checked==false) {
					this.leftId = item.healthDataId
					this.leftTime = item.createTime
				} else if (this.leftId == item.healthDataId && item.checked == true) {
					this.leftTime = ''
					this.leftId = ''
				}else if (this.rightId == '' && item.checked==false) {
					this.rightId = item.healthDataId
					this.rightTime = item.createTime
				} else if (this.rightId == item.healthDataId  && item.checked == true) {
					this.rightTime = ''
					this.rightId = ''
				}



				this.result[index].checked = !item.checked;

				if(this.leftId !='' && this.rightId !=''){
					this.noChoose = true;
				}else{
					this.noChoose = false;
				}






			},

			checkboxGroup(e) {
				// this.leftTime = e.detail.value[0]
				// this.rightTime = e.detail.value[1]
				// if(e.detail.value.length == 1){

				// }else{
				// 	this.rightTime = ''
				// }
				// if(e.detail.value.length == 2){
				// 	this.rightTime = e.detail.value[0]
				// }

				// let result = this.result;
				// if (e.detail.value.length == 2) {
				// 	for (let i = 0; i < result.length; i++) {
				// 		if (result[i].healthDataId == e.detail.value[0] || result[i].healthDataId == e.detail.value[1]) {
				// 			this.$set(this.result[i], 'checked', true);
				// 			this.cArr.push(result[i])
				// 		}
				// 	}
				// }
				// if (e.detail.value.length == 2) {
				// 	if (this.yearDay(this.cArr[0]) < this.yearDay(this.cArr[1])) {
				// 		this.startTime = this.cArr[0];
				// 		this.endTime = this.cArr[1];
				// 	} else {
				// 		this.startTime = this.cArr[1];
				// 		this.endTime = this.cArr[0];
				// 	}
				// 	this.contrastpop = true //去对比弹窗
				// }
			},
			navdataDetails(item) {
				if (global.setting.brandName == '康途慧智') {
					uni.setStorageSync('webViewUrl',
						global.host+'pc/h5/index.html#/pages/bodyFatScale/dataDetails?healthDataId=' +
						item
						.healthDataId + '&Authorization=' + uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'))
				} else {
					uni.setStorageSync('webViewUrl',
						'https://www.bsyjk.cn/h5/index.html#/pages/bodyFatScale/dataDetails?healthDataId=' + item
						.healthDataId + '&Authorization=' + uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'))
				}
				uni.navigateTo({
					url: '/subpackage/bodyFatScale/webView'
				})
			},
			// 去比对
			ToCompare(s, e) {
				let leftData = '';
				let rightData = '';
				if(this.leftTime<this.rightTime){
					leftData = s;
					rightData = e;
				}else{
					leftData = e;
					rightData = s;
				}

				if (global.setting.brandName == '康途慧智') {
					uni.setStorageSync('webViewUrl',
						global.host+'/pc/h5/index.html#/pages/bodyFatScale/ComparisonDetails?sHealthDataId=' +
						leftData + '&eHealthDataId=' + rightData +
						'&Authorization=' + uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z') + '&userId=' + uni.getStorageSync(
							global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId)
				} else {
					uni.setStorageSync('webViewUrl',
						'https://www.bsyjk.cn/h5/index.html#/pages/bodyFatScale/ComparisonDetails?sHealthDataId=' +
						leftData + '&eHealthDataId=' + rightData +
						'&Authorization=' + uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z') + '&userId=' + uni.getStorageSync(
							global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId)
				}
				uni.navigateTo({
					url: '/subpackage/bodyFatScale/webView'
				})
				this.contrastpop = false;
				// uni.navigateTo({
				// 	url:'/subpackage/bodyFatScale/ComparisonDetails?sHealthDataId='+s.healthDataId+'&eHealthDataId='+e.healthDataId
				// })
			},
			yearDay(data) {
				let numDay = data.createDate.split('-');
				let n = numDay[0],
					y = numDay[1],
					r = numDay[2];
				y = parseInt(y);
				r = parseInt(r);
				y = y < 10 ? '0' + y : y;
				r = r < 10 ? '0' + r : r;
				let nyr = n + '' + y + '' + r
				return nyr * 1
			},
			addTimes(m){return m<10?'0'+m:m },
			returnData(data) {
				let _this = this;
				if (data.ishaveDay ==0) {
					this.$message.info('当前日期没有数据')
					return;
				}
				if (_this.chooseTime.lastIndexOf(data.date) == -1) {
					_this.chooseTime.push(data.date)
				} else {
					_this.chooseTime.splice(_this.chooseTime.lastIndexOf(data.date), 1); //从数组中移除要删除的标签
				}
				let newData = []
				this.chooseData.result.forEach(function(a, b) {
					_this.chooseTime.forEach(function(f, g) {
						if (a.createDate == f) {
							newData.push(a)
						}
					})
				})
				if (newData.length == 0) {
					this.result = this.nowMonthAllData.result;
				} else {
					this.result = newData;
				}
				this.result.forEach(function(v,i){
					v.checked = false;
					if(v.healthDataId== _this.leftId || v.healthDataId == _this.rightId){
						v.checked = true;
					}
				})
			},
			getScaleDataList(yearmonth, isDay) {
				let _this = this;
				this.$api.get(global.apiUrls.getScaleDataList, {
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
						yearmonth: yearmonth
					})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							for (let i = 0; i < result.length; i++) {
								result[i].createTimes = result[i].createTime.split('-')
								result[i].checked = false
							}
							if (isDay) {
								if (_this.dayList.length != 0) {
									_this.dayList = _this.dayList.concat(result);
								} else {
									_this.dayList = result;
								}
							} else {
								_this.result = result;
							}
							let emitData = {
								thisday: yearmonth + '-01',
								result: result
							}

							_this.chooseData = emitData; //
							_this.nowMonthAllData = emitData; //当前月所有数据

							this.result.forEach(function(v,i){
								v.checked = false;
								if(v.healthDataId== _this.leftId || v.healthDataId == _this.rightId){
									v.checked = true;
								}
							})

							let dataTime = []
							this.nowMonthAllData.result.forEach(function(v,i){
								if(dataTime.lastIndexOf(v.createDate) == -1){


									dataTime.push(_this.dislodgeZero(v.createDate))
								}
							})
							this.canChoose = dataTime;


						}
					}).catch(err => {})
			},
			dislodgeZero(str) {
			  let strArray = str.split("-");
			  strArray = strArray.map(function(val) {
			    if (val[0] == "0") {
			      return (val = val.slice(1));
			    } else {
			      return val;
			    }
			  });
			  return strArray.join("-");
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				this.yearAndMonth = this.dislodgeZero(e.value);
				this.chooseTime = [];
				this.monthArr = e.valueArr
				this.getScaleDataList(e.value)

			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			change(e) {
				this.month = e;
				let monthArr = e.split('-')
				this.monthArr = monthArr;
				this.getScaleDataList(monthArr[0] + '-' + monthArr[1])
			},
		}
	}
</script>

<style lang="scss">
	.u-sticky-box{
		background-color: #F5F5F5;
		padding: 20rpx 0;
	}
	.contrast-box{
		display: flex;
		justify-content: space-around;
		.time-box{
			height: 60rpx;
			line-height: 60rpx;
			width:310rpx;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
		.cheng-img{
			width: 80rpx;
			height: 60rpx                                ;
			text-align: center;
		}
		.remove-box{
			height: 60rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			width:150rpx;
			text-align: center;
			background-image: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png);
			background-size: 100% 100%;
			border-radius: 40rpx;
			margin-top: 20rpx;
		}
		.comparison-button{
			height: 60rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			width:250rpx;
			text-align: center;
			background-image: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png);
			background-size: 100% 100%;
			border-radius: 40rpx;
			margin-top: 20rpx;
		}
	}

	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 200upx auto 30upx;
	}

	.popupContent {
		width: 614upx;
		background: #FFFFFF;
		box-sizing: border-box;
		text-align: center;
		position: relative;
		border-radius: 20upx;
		padding-bottom: 20rpx;

		.contrast-button {
			width: 375rpx;
			height: 78rpx;
			background: #2EA7E0;
			border-radius: 39rpx;
			font-size: 30rpx;
			color: #fff;
			line-height: 78rpx;
			margin: 10rpx auto 0;
		}

		.contrast-day {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #FF930A;
		}

		.popup-title {
			width: 614upx;
			height: 114rpx;
			background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png)no-repeat;
			background-size: 100% 100%;
			display: flex;

			.diand {
				width: 26rpx;
				height: 26rpx;
				background: #81C042;
				margin: 44rpx 20rpx 0 40rpx;
				border-radius: 50%;
			}

			.title {
				width: 460rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 114rpx;
				text-align: left;
			}

			.click-none {
				width: 44rpx;
				height: 44rpx;
				background: url(https://bsyjk-pic.bsyjk.cn/hideImage/567C9D30D6A64C72939CB0CBE51E4D84.png) no-repeat;
				background-size: 44rpx 44rpx;
				margin: 34rpx 0 0;
			}
		}
	}

	.calendarTop-view {
		display: flex;
		height: 100rpx;
		padding: 0 20rpx;
		background: #fff;

		.moth {
			width: 200rpx;
			height: 80rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #2EA7E0;
			font-size: 36rpx;
			text-align: center;
			color: #2EA7E0;
		}

		.calendar-icon {
			width: 40rpx;
			height: 40rpx;
			background: url(http://static.bsyjk.cn/calendaricon/853B946559944C76866D96461BE7F2CD.png)no-repeat;
			background-size: 100% 100%;
			float: right;
			margin: 26rpx 0 0 460rpx;
		}
	}

	.contrast-b {
		min-height: 800rpx;
		background: #2EA7E0;
		padding: 30rpx 0;

		.contrast-flex {
			display: flex;
			width: 702rpx;
			height: 106rpx;
			background: rgba(255, 255, 255, 0.3);
			box-shadow: 0px 1px 24rpx 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 22rpx;
			margin: 20rpx auto 0;
			padding: 0 20rpx;
			line-height: 106rpx;
			font-size: 36rpx;
			color: #fff;

			.Company {
				width: 430rpx;
			}

			.day {
				width: 200rpx;
				position: relative;
				text-align: right;
			}

			.day::before {
				content: '';
				width: 18rpx;
				height: 30rpx;
				position: absolute;
				top: 38rpx;
				right: -30rpx;
				background: url(http://static.bsyjk.cn/fjiantou/76940B225BE247DC8D2A174AC37F213E.png)no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
